<template>
  <div class="home">
    <el-container class="fat_content">
      <el-header>
        <el-button type="info" @click="outAy">退出</el-button>
      </el-header>
      <el-container class="content">
        <!-- 侧边栏 -->
        <el-aside :width="collapse ? '60px' : '200px'">
          <p @click="collapse = !collapse">|||</p>
          <el-menu :default-active="active.path" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
            active-text-color="#409eff" :unique-opened="true" :collapse="collapse" :collapse-transition="false" router>
            <el-submenu :index="item.id + ''" v-for="(item, index) in aside" :key="item.id">
              <template slot="title">
                <i :class="icons[index]"></i>
                <span>{{ item.authName }}</span>
              </template>
              <el-menu-item :index="'' + it.path" v-for="(it) in item.children" :key="it.id"
                @click="saveName(item.authName, it.authName, it.path)">
                <template slot="title">
                  <i class="el-icon-s-opportunity"></i>
                  <span>{{ it.authName }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      aside: [],
      icons: ['el-icon-user-solid', 'el-icon-goods', 'el-icon-info', 'el-icon-circle-plus', 'el-icon-help'],
      collapse: false,
      active:JSON.parse(sessionStorage.getItem('menu'))||{}
    }
  },
  methods: {
    ...mapMutations(['getToken']),
    /* 获取菜单栏数据 */
    async getAside() {
      let res = await this.$http.get('menus');
      this.aside = res.data;
      console.log(this.aside);
      /* 将数据提取出来展示出动态路由的样子 */
      var route = [];
      console.log(this.aside)
      this.aside.forEach((item) => {
        item.children.forEach(it => {
          var obj = {
            path: '/' + it.path,
            name: it.path.charAt(0).toUpperCase() + it.path.slice(1)
          }
          route.push(obj);
        })
      })
      // console.log(route);
      /* 添加到vuex */
      this.$store.commit('routeModule/routeAdd', route);
    },
    /* 退出 */
    outAy() {
      this.getToken({});
      this.$store.commit('routeModule/routeAdd', [])
      this.$router.push('/login');
    },
    //存储导航
    saveName(oneName, twoName,path) {
      var obj = { oneName, twoName, path };
      sessionStorage.setItem('menu', JSON.stringify(obj));
    }
  },
  mounted() {
    this.getAside()
  }
}
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  min-width: 720px;

  .fat_content {
    height: 100%;

    .el-header {
      background-color: #373d41;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .content {
      .el-aside {
        background-color: #333744;

        p {
          height: 40px;
          line-height: 40px;
          color: white;
          text-align: center;
          background-color: #4a5064;
        }
      }

      .el-main {
        background-color: #eaedf1;
      }
    }
  }
}
</style>